<template>
  <view class="main">
    <view class="card">

      <view class="item" v-if="!hideShop">
        <view class="label">选择门店</view>
        <selector icon="cuIcon-right" class="select" :picker-range="source.shops" range-key="comName" value-key="id"
                  @select="handleShopSelect"/>
      </view>
      <view class="item">
        <view class="label">选择手艺人</view>
        <selector icon="cuIcon-right" class="select" :picker-range="source.persons" range-key="nickname" value-key="id"
                  @select="handlePersonSelect"/>
      </view>

    </view>

    <view class="card">

      <view class="title">选择项目</view>

      <view v-if="!form.staff_id" class="tip"> 请先选择手艺人</view>
      <view class="list">

        <view class="item" v-for="(item,i) in source.projects" :key="i" :class="{active:selectIndex==i}"
              @click="handleProjectSelect(item,i)">
          {{ item.goodsName }}
        </view>

      </view>

      <view class="item">
        <view class="label">支付金额</view>
        <digit-input placeholder="请输入支付金额" class="input" v-model.number="form.money"/>
      </view>

    </view>

    <view class="footer">

      <view class="btn" @click="handlePost">支付</view>

    </view>

    <my-dialog ref="pay" content="提交成功" icon="cuIcon-check"/>
  </view>
</template>

<script>
import Selector from "@/components/selector";
import DigitInput from "@/components/digit-input";
import Api from "@/utils/Api";
import MyDialog from "@/components/dialog";

export default {
  name: "offline-trading",
  components: {MyDialog, DigitInput, Selector},
  data() {
    return {
      hideShop: false,
      source: {
        shops: [],
        persons: [],
        projects: [],
      },
      form: {
        money: null,
        goods_id: null,
        staff_id: null,
      },
      selectIndex: -1,
      location: {lat: 0, lng: 0,},
    }
  },
  methods: {
    getShopList() {
      Api.getStoreList(this.location).then(res => {
        this.source.shops = res;
      })
    },
    handleShopSelect(shop) {
      Api.getTechnicianList(shop.id).then(res => {
        this.source.persons = res
      })
    },
    handlePersonSelect(person) {
      console.log(person)
      Api.getGoods({member_id: person.id,limit:999}).then(res => {
        this.source.projects = res;
        this.form.staff_id = person.id
      })
    },
    handleProjectSelect(item, i) {
      this.selectIndex = i;
      this.form.goods_id = item.id
    },
    handlePost() {
      if (!this.form.staff_id) {
        this.$toast("请选择手艺人")
      } else if (!this.form.goods_id) {
        this.$toast("请选择项目")
      } else if (!this.form.money) {
        this.$toast("请输入支付金额")
      } else {
        Api.offlinePay(this.form).then(res => {
          this.$refs.pay.show().then(() => {
            uni.setStorageSync("needRefreshOrderNum", true)
            uni.redirectTo({url: `/pages/index/my/technician/order/info/index?id=${res}`})
          })
        })
      }
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    let shopId = options.shopId;
    if (shopId) {
      this.hideShop = true;
      this.handleShopSelect({id: shopId})
    } else {
      this.core.getLocation(res=>{
        this.location.lat = res.latitude
        this.location.lng = res.longitude

        this.getShopList();
      })
    }

  },
}
</script>

<style scoped lang='scss'>
.main {
  padding-bottom: calc(env(safe-area-inset-bottom) + #{r(150px)});
}

.card {
  background-color: white;
  padding: r(30px);
  overflow-x: hidden;

  & + .card {
    margin-top: r(20px);
  }

  & > .tip {
    text-align: center;
    color: #aaa;
  }

  & > .item {
    display: flex;
    justify-content: space-between;

    & + .item {
      margin-top: r(30px);
    }


    .label {
      font-size: r(28px);
      color: #333333;
    }

    .select {

      ::v-deep .picker-content {
        width: 100%;
      }
    }

    .input {
      flex: 1;
      text-align: right;
    }

  }

  & > .title {
    font-size: r(28px);
    color: #333333;
  }

  & > .list {
    width: calc(100% + #{r(20px)});
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: r(60px);

    .item {
      margin: r(20px 20px 0 0);
      height: r(100px);
      width: calc(25% - #{r(20px)});
      border: 1px solid #E2E2E2;
      border-radius: r(6px);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: r(28px);
      color: #333333;
      transition: all .2s ease-in-out;

      &.active {
        background-color: $primary-color;
        color: white;
        border-color: $primary-color;
      }
    }
  }

}


.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(env(safe-area-inset-bottom) + #{r(120px)});
  box-shadow: r(1px 2px 15px 1px) rgba(129, 129, 129, 0.27);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: white;

  .btn {
    width: r(200px);
    height: r(80px);
    line-height: r(80px);
    background: #BF8F3A;
    border-radius: r(50px);
    font-size: r(30px);
    color: white;
    text-align: center;
    margin-right: r(30px);
  }
}
</style>